import '@/assets/css/index.css';
import '@/assets/css/sonner.css';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { name } from '../../package.json';
import App from './App';
import './style.css';

export const iframeWrapperId = 'cls-temu-wrapper';
export const iframeId = 'cls-temu-iframe';

export default defineContentScript({
  matches: [
    'https://seller.kuajingmaihuo.com/*',
    'https://agentseller-us.temu.com/*',
    'https://agentseller.temu.com/*',
  ],
  cssInjectionMode: 'ui',
  async main(ctx) {
    const ui = await createShadowRootUi(ctx, {
      name: name,
      position: 'inline',
      onMount: (uiContainer) => {
        const app = document.createElement('div');
        uiContainer.append(app);
        const root = createRoot(app);
        root.render(
          <StrictMode>
            <App></App>
          </StrictMode>,
        );
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    });
    ui.mount();

    const iframeUi = createIframeUi(ctx, {
      page: '/temu-html.html',
      position: 'inline',
      onMount: (wrapper, iframe) => {
        wrapper.id = iframeWrapperId;
        wrapper.style.cssText = `
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          z-index: 999999;
          display: none;
        `;
        iframe.id = iframeId;
        iframe.style.cssText = `
          position: absoute;
          width: 100%;
          height: 100%;
          border: none;
        `;
      },
    });

    // Show UI to user
    iframeUi.mount();
  },
});
